<template>
    <div class="recharge-page">
      <back title="充值"></back>
      <div class="recharge">
		<div class="myprice">
		  <div class="price_black">
			<p class="name">我的余额</p>
			<p class="curprice">{{balance}}</p>
		  </div>
		</div>
		<div class="changeprice">
		  <ul>
			<li :class="{on:index==active }" v-for="(item,index) in priceList" @click="priceClick(index,item,1)" :key="index">
			  <h5 class="title">{{ item.rmb }}RMB</h5>
			  <!-- <p class="price">{{ item.rmb }}元</p> -->
			</li>
		  </ul>
		  <div class="change-input-box">
			<span>充值金额:</span>
			<input type="txt" class="change-input"  @blur="CountNum" v-model="rmbval" placeholder="自定义金额">
		  </div>
		</div>
		<cube-button class="cubeCle" @click="comrecharg">确认充值</cube-button>
	  </div>
    </div>
</template>

<script>
  import {mapGetters } from 'vuex'
  export default {
    data() {
      return {
        //充值渠道list
        chargeList: [],
        //金额选择列表
        priceList: [
          {
            priceNum: "30",
            rmb: "100",
            iszb: true
          },
          {
            priceNum: "50",
            rmb: "300",
            iszb: true
          },
          {
            priceNum: "100",
            rmb: "500",
            iszb: true
          },
          {
            priceNum: "300",
            rmb: "1000",
            iszb: true
          },
		  {
            priceNum: "100",
            rmb: "3000",
            iszb: true
          },
          {
            priceNum: "300",
            rmb: "5000",
            iszb: true
          }
        ],
        rmb:'100',
        rmbval:'',
        channelId:'',
        money:'',
        active:0,
        activePay:0,
        balance:0,
        min_money:'',
      };
    },
    created(){
      this.rmbval = '';
      this.myBalance()
    },
    methods: {
      myBalance(){
            this.$http.get(`/MyInfo/myBalance`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.balance = res.data.myBalance
                }
            })
      },
      //input 输入监听
      CountNum(){
        console.warn(this.rmbval,'this.rmbval')
        if (this.rmbval){
          this.rmb = '';
          this.active=null
        }else {
          this.rmbval=''
          this.active=0
          this.rmb = this.priceList[this.active].price;
        };
      },
      getWebPayChargeList(){
        const toast = this.$createToast({
          time: 10000,
          txt: '正在获取支付方式中'
        })
        toast.show()

        this.$http.post(`/Charge/chargeBalance`,{
						num:this.money
					}).then( res => {
						console.log(res)
						toast.hide()
						if(res.code == 200){
							window.open(res.data.h5_url,'_blank');
						}
					}).catch(()=>{
						toast.hide()
					})
      },
      //点击金币切换
      priceClick(index, item,type) {
        if(type == 1){
          this.active=index
          this.rmbval = '';
          this.rmb = item.rmb;
        }else{
          this.activePay=index;
          this.channelId = item.id;
        }
      },
      //确认充值
      comrecharg() {
        if(this.rmb){
          this.money = this.rmb;
        }
        if(this.rmbval){
          this.money = this.rmbval;
        }
        if (Number(this.money)<1){
          this.$createToast({
            time: 1500,
            txt: '充值金额必须大于0！',
            type: "text"
          }).show();
          return false
        } ;
        this.getWebPayChargeList();

      }
    }
  };
</script>

<style lang="stylus">
.recharge-page{
  width: 100%;
  padding-top 50px
  .recharge {
    height: 100%;
    width: 100%;
    .cube-popup_mask{
      pointer-events: none;
    }
    .cube-popup-content {
      height: 60%;
      background-color: #fff;
      padding: 15px;
    }
    .red {
      color: red;
    }
    .cubeCle {
      height: 40px;
      line-height: 40px;
      padding: 0;
      width: 70%;
      border-radius: 30px;
      margin: 20px auto 0 auto;
      background: linear-gradient(to right , #3b79e7, #3563db);
    }
    .myprice {
      height: 100px;
      width: 100%;
      background: linear-gradient(to right , #3b79e7, #3563db);
      overflow: hidden;
      .price_black {
        width: 70%;
        height: 80px;
        background: linear-gradient(to left, #474747, #595959, #484848);
        margin: 20px auto 0 auto;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        .name {
          text-align: center;
          color: #fff;
          line-height: 30px;
          border-bottom: 0.5px solid #fff;
          position: relative;
		  font-size: 14px;
          &::after {
            content: " ";
            width: 10px;
            height: 10px;
            position: absolute;
            right: -4px;
            background-color: #febc89;
            border-radius: 10px;
            top: 25px;
          }
          &::before {
            content: " ";
            width: 10px;
            height: 10px;
            position: absolute;
            left: -4px;
            background-color: #fe70b6;
            border-radius: 10px;
            top: 25px;
          }
        }
        .curprice {
          text-align: center;
          color: #fff;
          line-height: 50px;
          font-size: 24px;
        }
      }
    }
    .changeprice {
      width: 100%;
      padding-top: 30px;
      overflow: hidden;
      ul {
        // display: flex;
        // flex-direction: row;
        // flex-wrap: wrap;
        li {
          display: inline-block;
          border: 0.8px solid #cccccc;
          margin-left: 9px;
          width: 30%;
          border-radius: 5px;
          text-align: center;
          position: relative;
          padding: 10px 0;
          margin-bottom: 10px;
          .title {
            font-size: 12px;
          }
          .price {
            color: #9b9b9b;
            font-size: 10px;
          }
          .bq {
            display: none;
          }
        }
        .on {
          border: 0.8px solid #19e9cb;
          &:after {
            content: " ";
            width: 18px;
            height: 15px;
            display: block;
            background: url("../../assets/image/riticon.png") no-repeat;
            background-size: 18px 15px;
            position: absolute;
            right: 0;
            bottom: -1px;
          }
          .price {
            color: #00d8c9;
          }
          .title {
            color: #00d8c9;
          }
        }
        .zs {
          .bq {
            content: " ";
            width: 70%;
            height: 30%;
            display: block;
            background: url("../../assets/image/ticon.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: -3px;
            top: -5px;
            font-size: 5px;
            line-height: 200%;
            color: #fff;
          }
        }
      }
      .change-input-box{
        display: flex;
        align-items: center;
        padding:0 10px;
        margin-top:20px;
        span{
          font-size:14px;
        }
        .change-input{
          width:200px;
          height:35px;
          line-height: 35px;
          font-size:14px;
          border:1px solid #ddd;
          border-radius: 5px;
          margin-left: 10px;
          padding:0 10px;
        }
      }
    }
    .tcChannerl {
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        li {
          flex-grow: 1;
          margin-left: 10px;
          width: 25%;
          border-radius: 5px;
          text-align: center;
          position: relative;
          margin-top: 10px;
          padding: 5px;
          background: #f6f6f6;
          &:nth-child(1),
          &:nth-child(4),
          &:nth-child(8),
          &:nth-child(12),
          &:nth-child(16) {
            margin-left: 0;
          }
          .title {
            font-size: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .bq {
            display: none;
          }
        }
        .on {
          border: 0.8px solid #19e9cb;
          &:after {
            content: " ";
            width: 18px;
            height: 15px;
            display: block;
            background: url("../../assets/image/riticon.png") no-repeat;
            background-size: 18px 15px;
            position: absolute;
            right: 0;
            bottom: 0px;
          }
          .price {
            color: #00d8c9;
          }
          .title {
            color: #00d8c9;
          }
        }
        .zs {
          .bq {
            content: " ";
            width: 70%;
            height: 30%;
            display: block;
            background: url("../../assets/image/ticon.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: -3px;
            top: -5px;
            font-size: 5px;
            line-height: 200%;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
